<script setup>


</script>

<template>
  <!-- <div class="container-fluid"></div> -->
  <!-- Navbar -->
  <nav id="home" class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
      <!-- Brand -->
      <a class="navbar-brand" href="javascript:location.reload();">
        <img class="logo" src="../assets/image/logo.png" alt="">
      </a>
      <!-- Toggler button for mobile view -->
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <!-- Navbar links -->
      <div  data-aos="fade-up" class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <!-- <a class="nav-link active" aria-current="page" href="#">home</a> -->
            <a class="nav-link" href="#home">home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#about">about</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#howtobuy">how to buy</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#tokenoimic">tokenoimic</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">socialmeadia</a>
          </li>
          <li class="nav-item">
            <button class="btn button">buy now</button>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</template>

<style scoped>
.button {
  width: 115px;
  background: #F2E22A;
  border-radius: 20px;
}

.button:hover {
  background: #F2E22A;
}

.navbar {
  background: #2F231C !important;
}

.logo {
  width: 80px;
  height: 32.26px;
}

.navbar-nav {
  --bs-nav-link-color: white;
  --bs-nav-link-hover-color: white;
}


.nav-link {
  color: white;
}

.nav-link:hover {
  color: white;
}

.nav-item {
  margin: 0 20px;
}

.navbar-toggler {
  width: 42px;
  padding-left: 0;
  padding-right: 0;
  background: white !important;
}

.navbar-toggler-icon {
  font-size: 16px;
}
</style>